/*
 * @Author: luoxi
 * @Date: 2022-01-25 09:51:12
 * @LastEditors: luoxi
 * @LastEditTime: 2022-01-25 12:40:52
 * @FilePath: \vue-admin-box\vite.config.ts
 * @Description:
 */
import { ConfigEnv, UserConfigExport } from "vite";
import vue from "@vitejs/plugin-vue";
import { viteMockServe } from "vite-plugin-mock";
import { resolve } from "path";
import topLevelAwait from "vite-plugin-top-level-await";
// vxe-table
import {
  createStyleImportPlugin,
  VxeTableResolve,
} from "vite-plugin-style-import";

const pathResolve = (dir: string): any => {
  return resolve(__dirname, ".", dir);
};

const alias: Record<string, string> = {
  "@": pathResolve("src"),
  "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
};

/**
 * @description-en vite document address
 * @description-cn vite官网
 * https://vitejs.cn/config/ */
export default ({ command }: ConfigEnv): UserConfigExport => {
  const prodMock = true;
  return {
    // base: "./",

    resolve: {
      alias,
    },
    server: {
      port: 3001,
      host: "0.0.0.0",
      open: true,
      proxy: {
        // 代理配置
        "/dev":
          "https://www.fastmock.site/mock/48cab8545e64d93ff9ba66a87ad04f6b/",
      },
    },
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            echarts: ["echarts"],
          },
        },
      },
    },
    plugins: [
      vue(),
      // createStyleImportPlugin({
      //   resolves: [VxeTableResolve()],
      // }),
      viteMockServe({
        mockPath: "mock",
        localEnabled: command === "serve",
        prodEnabled: command !== "serve" && prodMock,
        watchFiles: true,
        injectCode: `
          import { setupProdMockServer } from '../mockProdServer';
          setupProdMockServer();
        `,
        logger: true,
      }),
      topLevelAwait({
        // The export name of top-level await promise for each chunk module
        promiseExportName: "__tla",
        // The function to generate import names of top-level await promise in each chunk module
        promiseImportName: (i) => `__tla_${i}`,
      }),
    ],
    css: {
      postcss: {
        plugins: [
          {
            postcssPlugin: "internal:charset-removal",
            AtRule: {
              charset: (atRule) => {
                if (atRule.name === "charset") {
                  atRule.remove();
                }
              },
            },
          },
        ],
      },
    },
  };
};
